<script setup lang="ts">
/*
vue3
  v-model是vue2的v-model与.sync结合体
  特点：一个组件可以使用多个v-model
  自己的见解：以前vue2的.sync弥补v-model一个组件只能有一个的缺点 ，vue3 v-model是vue2的v-model与.sync结合体
     如果父传子属性名是modelValue  可以简写  v-model='父组件属性'
     如果父传子属性名是xxx         可以简写  v-model:xxx='父组件属性'

  <子组件标签 :modelValue="父组件属性" @update:modelValue="父组件属性=$event"    />
  <子组件标签 v-model:modelValue="父组件属性"     />
  <子组件标签 v-model="父组件属性"     />
  子组件内：
     defineProps<{
      modelValue:string
     }>()
     const emits=defineEmits<{
      (e:'update:modelValue',x:string):void
     }>()
     emits('update:modelValue',实参值)
*/
// 父传子一个number数据，且子组件可修改该数据  v-model完成
/*

 xxx   v-model:abc='xxxabc'
      :abc="xxxabc"  @update:abc="xxxabc=$event"


   <xxx  v-model:qwe="aaa"    />  
   <xxx  :qwe="aaa"   @update:qwe="aaa=$event"    />  
   xxx.vue
     defineProps<{
       qwe:string
     }>()
     const emits=defineEmits<
     {
      (e:'update:qwe',x:string):void
     }>()

*/
import { ref } from 'vue'
import TestB from './components/TestB.vue'
const num = ref(999)
</script>
<template>
  <h3>父组件</h3>
  <hr />
  <!-- <TestB :modelValue="num" @update:modelValue="num = $event"></TestB> -->
  <TestB v-model:modelValue="num"></TestB>
  <TestB v-model="num"></TestB>
</template>

<style lang="scss"></style>
